<template>
	<view class="page">
		<headerVue title="身份升级"></headerVue>
		<view class="box margin20">
			<view class="item flex-between align-center">
				<text style="font-size: 32rpx;color: #FFFFFF; line-height: 1;">当前等级</text>
				<text style="font-size: 32rpx;color: rgba(255,255,255,0.6); line-height: 1;">{{identityStr}}</text>
			</view>
			<view class="item flex-between align-center" @click="show=true">
				<text style="font-size: 32rpx;color: #FFFFFF; line-height: 1;">升级成为</text>
				<view class="flex align-center">
					<text style="font-size: 32rpx;color: rgba(255,255,255,0.6); line-height: 1;">{{ name || "选择升级节点" }}</text>
					<image src="../../static/nav/more.png" style="width: 36rpx; height: 36rpx;"></image>
				</view>
				
			</view>
			<view class="item flex-between align-center">
				<text style="font-size: 32rpx;color: #FFFFFF; line-height: 1;">升级金额</text>
				<text style="font-size: 32rpx;color: rgba(255,255,255,0.6); line-height: 1;">{{price}}USDT</text>
			</view>
			
			<view class="btn margin80" @click="levelFun()">
				<image src="../../static/K6.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		
		<!-- <u-action-sheet :list="list" v-model="show" @confirm="confirm"></u-action-sheet> -->
		<u-popup v-model="show" mode="bottom">
			<view class="popupVue">
				<view class="item" v-for="(item, index) in list" :key="index"  @click="confirm(item)">
					{{item.name}}
				</view>
			</view> 
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
				show: false,
				key: "",
				name: "",
				price: 0,
				identityStr: ""
			}
		},
		async onShow() {
			await this.getLevel()
			await this.getUser()
		},
		methods: {
			async getLevel(){
				const res = await this.$request("/front/user/identityList")
				if(res.code===0) {
					this.list = res.data
				}
			},
			async getUser(){
				const result = await this.$request("/front/user/userInfo")
				if(result.code===0) {
					this.identityStr = result.data.identityStr
					console.log("身份", this.identityStr)
				}
			},
			async levelFun(){
				if(!this.key) return this.$u.toast("请选择升级节点")
				const res = await this.$request("/front/user/upgradeIdentity", {
					identity: this.key
				})
				if(res.code===0) {
					this.$u.toast(this.i18n.success)
					this.getUser()
					this.key = ""
					this.name = ""
					this.price = 0
				}else{
					this.$u.toast(res.msg)
				}
			},
			confirm(e){
				console.log(e)
				this.show = false
				this.key = e.key
				this.name = e.name
				this.$request("/front/user/upgradePrice", {
					identity: this.key
				}).then(res=>{
					this.price = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.popupVue {
		width: 100%;
		.item {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1rpx solid #f5f5f5;
			color: #333;
		}
	}
	.box {
		width: 670rpx;
		height: 730rpx;
		background: url("../../static/K3.png") no-repeat;
		background-size: 100% 100%;
		padding: 80rpx;
		.item {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #45F882;
		}
		.btn {
			width: 100%;
			height: 102rpx;
		}
	}
</style>